<template>
  <div class="app-container">
    <div class="zc-table-common">
      <div class="zc-table-search">
        <div class="search-quest">
          <span class="search-quest-title">是否解决：</span>
          <div class="search-input">
            <el-select v-model="isSolve" placeholder="请选择">
              <el-option label="已解决" :value="1"></el-option>
              <el-option label="未解决" :value="0"></el-option>
            </el-select>
          </div>
        </div>
        <div class="search-quest">
          <el-button @click.native="clearSearch">清空条件</el-button>
          <el-button type="primary" @click.native="searchTable">搜索</el-button>
        </div>
      </div>
      <div class="zc-table-body">
        <el-table
          :data="messageTable.data"
          :empty-text="emptyText"
          v-loading="tableLoading"
          border
          style="width: 100%">
          <el-table-column
            prop="title"
            label="留言标题">
          </el-table-column>
          <el-table-column
            prop="createTime"
            width="180"
            label="日期">
            <template slot-scope="scope">
              <span>{{scope.row.createTime | formatTime(2)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="message"  width="400"
            label="留言内容">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="feedback"
            label="反馈内容">
          </el-table-column>
          <el-table-column
            prop="feedbackTime"
            width="180"
            label="反馈日期">
            <template slot-scope="scope">
              <span>{{scope.row.feedbackTime | formatTime(2)}}</span>
            </template>
          </el-table-column>
          <el-table-column
          prop="isSolve"
          label="是否解决">
            <template slot-scope="scope">
              <span>
                <span v-if="scope.row.isSolve">已解决</span>
                <span v-else>未解决</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="150">
            <template slot-scope="scope">
                <el-button type="text" size="small" @click="viewcontent(scope.row.id)">反馈</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="zc-page-box">
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="pageInfo.pageSize"
            :current-page="pageInfo.curPage"
            :total="messageTable.total"
            @current-change="changePage"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      title="留言详情"
      custom-class="dialog-wrap" 
      :visible.sync="dialogInfo.dialogFlag" 
      width="700px" 
      top="15vh" 
      :close-on-click-modal="dialogInfo.default" 
      :close-on-press-escape="dialogInfo.default"
      >
      <div class="dialog-container">
        <el-form :model="ruleForm" :rules="rules" ref="UserForm" label-width="120px" label-suffix="：">
          <div class="event-content">
            <el-form-item label="留言标题">
              <div class="cont-input">
                <span>{{logInfoData.title}}</span>
              </div>
            </el-form-item>
            <el-form-item label="留言时间">
              <div class="cont-input">
                <span>{{logInfoData.createTime | formatTime(2)}}</span>
              </div>
            </el-form-item>
            <el-form-item label="留言类型">
              <div class="cont-input">
                <span>{{logInfoData.typeName}}</span>
              </div>
            </el-form-item>
            <el-form-item label="留言内容">
              <div class="cont-input">
                <span>{{logInfoData.message}}</span>
              </div>
            </el-form-item>
            <el-form-item label="留言人姓名">
              <div class="cont-input">
               <span>{{logInfoData.name}}</span>
              </div>
            </el-form-item>
            <el-form-item label="留言人职位">
              <div class="cont-input">
               <span>{{logInfoData.positionName}}</span>
              </div>
            </el-form-item>
            <el-form-item label="留言手机号">
              <div class="cont-input">
               <span>{{logInfoData.phone}}</span>
              </div>
            </el-form-item>
            <el-form-item label="反馈内容" prop="feedback">
              <div class="cont-input">
                <el-input v-model="ruleForm.feedback" type="textarea" placeholder="请输入反馈内容"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="是否解决" prop="isSolve">
              <div class="cont-input">
                <el-switch
                  v-model="ruleForm.isSolve"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
                </el-switch>
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog">取 消</el-button>
        <el-button type="primary" @click="saveMessage">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { GetMessageTable, GetMessageSingle, SaveMessage } from '@/api/requestConfig'
  export default {
    name: 'MessageTable',
    created() {
      // 获取留言表格
      this.getMessageTable()
    },
    data() {
      return {
        ruleForm: {
          feedback: ''
        },
        rules: {
          feedback: [
            { required: true, message: '请输入反馈内容', trigger: 'blur' }
          ]
        },
        isSolve: '',
        emptyText: '未匹配到留言数据',
        logInfoData: {},
        messageTable: {},
        pageInfo: {
          curPage: 1,
          pageSize: 20
        },
        dialogInfo: {
          dialogFlag: false,
          default: false
        },
        tableLoading: true,
        addFlag: true
      }
    },
    methods: {
      // 清空搜索条件
      clearSearch() {
        this.isSolve = ''
        this.getMessageTable()
      },
      // 搜索
      searchTable() {
        this.pageInfo.curPage = 1
        this.getMessageTable()
      },
      // 分页
      changePage(nowPage) {
        this.pageInfo.curPage = nowPage
        this.getMessageTable()
      },
      // 获取留言表格
      getMessageTable() {
        this.tableLoading = true
        var needData = {}
        needData.curPage = this.pageInfo.curPage
        needData.pageSize = this.pageInfo.pageSize
        if (this.isSolve === 0 || this.isSolve === 1) {
          needData.isSolve = this.isSolve
        }
        GetMessageTable(needData).then(res => {
          if (res.data) {
            this.messageTable = res
          } else {
            this.$message.error(res.message)
          }
          this.tableLoading = false
        })
      },
      // 查看留言信息
      viewcontent(rowId) {
        this.showDialog()
        GetMessageSingle(rowId).then(res => {
          if (res.data) {
            this.logInfoData = res.data
            this.ruleForm.isSolve = this.logInfoData.isSolve
            this.ruleForm.feedback = this.logInfoData.feedback
            this.ruleForm.type = this.logInfoData.type
            this.ruleForm.position = this.logInfoData.position
          }
        })
      },
      // 弹窗显示隐藏
      showDialog() {
        this.dialogInfo.dialogFlag = !this.dialogInfo.dialogFlag
      },
      // 保存反馈
      saveMessage() {
        var self = this
        if (!this.addFlag) {
          return
        }
        this.$refs.UserForm.validate(function(valid) {
          if (valid) {
            var needData = {}
            needData.feedback = self.ruleForm.feedback
            needData.isSolve = self.ruleForm.isSolve
            needData.type = self.ruleForm.type
            needData.position = self.ruleForm.position
            needData.id = self.logInfoData.id
            self.addFlag = false
            SaveMessage(needData).then(res => {
              if (res.code === 200) {
                self.$message.success(res.message)
                self.showDialog()
                self.searchTable()
              } else {
                self.$message.error(res.message)
              }
            }).catch(error => {
              console.log(error)
            })
          } else {
            return
          }
        })
        setTimeout(function() {
          self.addFlag = true
        }, 3000)
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/zc-table-common.scss";
  @import "src/styles/info.scss";
  .log-info{
    padding: 5px 0;
  }
</style>
